import React, { Component } from 'react';
import { connect } from 'react-redux';
import MealList from './components/MeailList';
import MealTab from './components/MealTab';
import axios from 'axios';


function mapStateToProps(state) {
    return {
        ...state
    };
}

function mapDispatchToProps(dispatch) {
    return {
        getList() {
            axios.get('/api/meal').then((res) => {
                console.log('api/meal', res);
                dispatch({ type: "SET_MEAL_LIST", data: res.data })
            })
        },
        // 选中菜品分类
        selectCate(data) {
            dispatch({ type: "SELECT_MEAL_CATE", data: data })
        }



    };
}

class Meal extends Component {
    componentWillMount() {
        this.props.getList();
    }


    // 给定一个tab的index ，计算滚动的top的位置
    getTopPoistion(index, position_arr) {
        return position_arr[index];
    }


    // 给定一个位置，计算tab的index位置
    getTabIndex(topPostion, position_arr) {

        let index = 0;  // 返回的位置，初始值设为0
        let flag = 0;   // 是否找到位置


        if (position_arr) {
            position_arr.forEach((item, i) => {
                // 给出的位置正好等于当前tab的位置，则返回当前tab的索引
                if (item === topPostion) {
                    index = i
                }

                // 当前tab的位置第一次大于给出的位置，返回当前tab的索引位置-1的位置
                if (item > topPostion && flag === 0) {
                    flag = 1;
                    index = i - 1;
                }
            })

        }

        return index;
    }





    render() {

        return (
            <div>

                <div className="left">
                    <MealTab {...this.props} getTopPoistion={this.getTopPoistion}  ></MealTab>
                </div>
                <div className="right">
                    <MealList {...this.props} getTabIndex={this.getTabIndex}></MealList>
                </div>
            </div>
        );
    }
}

export default connect(
    mapStateToProps, mapDispatchToProps
)(Meal);